import { useState,useEffect } from 'react'
import styles from './styles.less'
import { connect, history } from 'umi';
import BugDetail from './BugDetail'
import BugPage from './BugPage'

const ProjectBug = (props) => {
    const {
        projectId,
        routeParam,
        queryInitParams,
        dispatch,
        projectPermission,
    } = props
   
    if (routeParam.tab !== 'bug') {
        return <></>;
    }

    if (routeParam.itemId) {
        return <BugDetail projectId={projectId} projectPermission={projectPermission} bugId={routeParam.itemId} ></BugDetail>
    }

    const onQueryParamChange = (params) => {
        dispatch({
            type: 'queryParams/saveQueryParams',
            payload: {
                name: "bugPage",
                params: params
            }
        });
    }


    return <BugPage projectId={projectId} projectPermission={projectPermission} onQueryParamChange={onQueryParamChange} queryInitParams={queryInitParams}></BugPage>
}


export default connect(({ queryParams}) => ({
    queryInitParams: queryParams.bugPage,
}))(ProjectBug);